<template>
    <div>
        <span @click="changeFilter('all')" :class="{active:props.filterstate=='all'}">全部({{props.tododata.length}})</span>
        <span @click="changeFilter('com')" :class="{active:props.filterstate=='com'}">已完成({{complete}})</span>
        <span @click="changeFilter('unc')" :class="{active:props.filterstate=='unc'}">未完成({{uncomplete}})</span>
    </div>
</template>
<script setup>
// 就是setup 语法糖 不要return
import {computed} from 'vue'
    //CompositionApi
    //这里不存在this 
const props=defineProps({
    tododata:{
        type:Array,
        default:()=>{ return []}
    },
    filterstate:{
        type:String,
        default:"all"
    }
});
const emits=defineEmits(["changefilter"]);
let changeFilter=(state)=>{
    emits('changefilter',state);
}
let complete=computed(()=>{
    return props.tododata.filter(t=>t.done).length;
});
let uncomplete=computed(()=>{
    return props.tododata.filter(t=>!t.done).length; 
});

</script>

<!-- <script>
export default {
    data(){},
    methods:{},
    setup (props,context) { context.emit context.attrs
        

        return {}
    }
}
</script> -->

<style scoped>
.active{
    color:white;
    background-color: gray;
}
</style>